<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>proxy代理测试2</title>
</head>
<body>

</body>
<script>
  const user = {
    name:'张三',
    age:33,
    addr:"湖南"
  }

  // 将此对象进行代理
  const can = new Proxy(user,{
    get(target, propName){
      // target 所代理的对象 propName对象的属性 
      console.log('get函数被触发',target[propName]);
      // return target[propName]

      // 用反射机制来获取对象属性
      return Reflect.get(target, propName)
    },
    // 当属性被重新赋值时进入到该函数中
    set(target, propName, value){
       // target 所代理的对象 propName对象的属性 value 你要修改的属性的值
       console.log('当代理对象的值被修改时进入该函数',value);
      //  target[propName] = value

      // 反射机制修改属性值
      Reflect.set(target, propName, value)
      
    },
    deleteProperty(target, propName){
      // 其底层是用反射机制来进行数据获取的
      // 我们知道响应式数据 用Object.defineProperty() 只能让其对象原有的属性实现响应式
      // 后面添加的属性不是响应式,
      // 我们只能通过$set() 添加对象响应式属性
      // 然后用$delete()删除对象响应式数据
      // delete target[propName]

      // 反射机制来删除对象属性
      Reflect.deleteProperty(target, propName)
   }
  })


  console.log(can);
  console.log(can.name);
  can.name = '李四'
  console.log(can);
  delete can.name
  console.log(can);
</script>
</html>